import React, { Component } from "react";
import "../assest/css/tabs.css";
import Film from "./Films/Film";
import My from "./Films/My";
import Rank from "./Films/Rank";

export default class tabs extends Component {
  state = {
    tabList: [
      { id: 1, value: "电影" },
      { id: 2, value: "排行榜" },
      { id: 3, value: "我的" },
    ],
    activedIndex: 1,
  };
  render() {
    let tabs = this.state.tabList.map((item) => (
      <div
        key={item.id}
        onClick={this.tabChange.bind(this, item.id)}
        className={this.state.activedIndex === item.id ? "tab actived" : "tab"}
      >
        {item.value}
      </div>
    ));

    return (
      <div>
        {this.whichPage()}
        <div className="tabs">{tabs}</div>
      </div>
    );
  }
  whichPage() {
    if (this.state.activedIndex === 1) {
      return <Film></Film>;
    } else if (this.state.activedIndex === 2) {
      return <Rank></Rank>;
    } else {
      return <My></My>;
    }
  }
  tabChange = (id) => {
    this.setState({
      activedIndex: id,
    });
  };
}
